
<template>
  <div>
    <div id="0000" style="color: white;text-align: center;    padding: 50px;" v-if="group.length==0">暂无图片{{group.lenght}}</div>
    <div style="display: inline-block;" v-for="(item,index) in group" :key="index">
      <PreviewThumbnail :imgsrc="item['imgsrc']" :title="item['title']" :mw="item['mw']" :mh="item['mh']" @clickImg="clickImgHandle(index)" :addition="index" />
    </div>
    <transition name="slide-fade">
      <PreviewSlide v-if="slideIsShow" :group="group" :currentSlide.sync="currentSlide" @close="closeSlideHandle" />
    </transition>
  </div>
</template>

<style scope>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
a {
  text-decoration: none;
}
</style>

<script>
import PreviewThumbnail from './PreviewThumbnail'
import PreviewSlide from './PreviewSlide'
export default {
  name: 'PreviewGroup',
  data () {
    return {
      currentSlide: 0,
      slideIsShow: false
    }
  },
  components: {
    PreviewThumbnail, PreviewSlide
  },
  mounted () {
  },
  methods: {
    clickImgHandle (index) {
      this.currentSlide = index
      this.slideIsShow = true
    },
    closeSlideHandle () {
      this.slideIsShow = false
    }
  },
  props: {
    group: {
      type: Array
    }
  }
}
</script>
